<template>
  <div>
    <el-button
      type="primary"
      @click="addExchangeType(0)"
      style="margin-bottom: 20px;"
      size="small"
    >添加交流类型</el-button>

    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="500px"
      center
    >
      <el-form label-width="120px" :model="form" :rules="rules" ref="form" class="demo-ruleForm">
        <el-form-item label="类型名称" prop="moduleName">
          <el-input v-model.trim="form.moduleName" placeholder="请输入类型名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('form')">取消</el-button>
        <el-button type="primary" @click="save('form')" :loading="loading">确定</el-button>
      </span>
    </el-dialog>

    <BaseTable ref="baseTable" :tableSetting="tableSetting" @handleCommon="handleCommon" />
  </div>
</template>

<script>
import BaseTable from "../../../../components/table/baseTable";
import {
  getExchangeList,
  addExchangeType,
  deleteExchangeType,
  editExchangeType,
} from "../../../../service/Api";

export default {
  name: "exchangeSetting",
  components: { BaseTable },
  data() {
    return {
      title: "",
      dialogVisible: false,
      loading: false,
      form: {
        moduleName: "",
      },
      rules: {
        moduleName: [
          {
            required: true,
            message: "请输入类型名称",
            trigger: "blur",
          },
          {
            required: true,
            message: "请输入类型名称",
            trigger: "change",
          },
        ],
      },
      tableSetting: {
        tableApiFn: getExchangeList,
        options2: [
          {
            prop: "id",
            label: "id",
            isShow: false,
          },
          // {
          //   prop: "sort",
          //   label: "排序",
          //   isShow: false
          // },
          {
            prop: "moduleName",
            label: "交流类型",
            isShow: true,
          },
        ],
        btns: [
          {
            text: "编辑",
            size: "mini",
            handleName: "addExchangeType",
            type: "primary",
            plain: "plain",
            show: (row) => {
              return row.moduleName != "公司规划";
            },
          },
          {
            text: "删除",
            size: "mini",
            handleName: "toDeleteExchangeType",
            type: "danger",
            plain: "plain",
            show: (row) => {
              return row.moduleName != "公司规划";
            },
          },
        ],
      },
      rowId: 0,
      rowSort: 0,
    };
  },
  mounted() {
    this.getExchangeList();
  },
  methods: {
    getExchangeList() {
      getExchangeList();
    },
    addExchangeType(row) {
      //显示添加、修改内部交流类型弹框
      if (row == 0) {
        this.title = "添加交流类型";
        this.form.moduleName = "";
      } else {
        this.title = "修改交流类型";
        this.form.moduleName = row.moduleName;
        this.rowId = row.id;
        this.rowSort = row.sort;
      }
      this.dialogVisible = true;
    },
    close(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
    save(formName) {
      if (this.form.moduleName != "") {
        if (this.title == "添加交流类型") {
          addExchangeType({
            moduleName: this.form.moduleName,
          }).then((res) => {
            if (res.code == 0) {
              this.close("form");
              this.$message.success("已成功添加交流类型！");
              this.$refs.baseTable.initData();
            }
          });
        } else {
          editExchangeType({
            id: this.rowId,
            moduleName: this.form.moduleName,
            sort: this.rowSort,
          }).then((res) => {
            if (res.code == 0) {
              this.dialogVisible = false;
              this.$message.success("已成功修改交流类型！");
              this.$refs.baseTable.initData();
            }
          });
        }
      } else {
        this.$message.error("交流类型不能为空！");
      }
    },
    toDeleteExchangeType(row) {
      //删除内部交流配置类型
      this.$confirm("此操作将永久删除,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteExchangeType(row.id).then((res) => {
            if (res.code === 0) {
              this.$refs.baseTable.initData();
              this.$message.success("删除成功!");
            } else {
              this.$message.warning(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCommon(name, row, idx) {
      if (this[name]) {
        this[name](row, idx);
      }
    },
  },
};
</script>

<style scoped>
</style>